<template>
    <el-container class="article-container" direction="vertical" id="test">
        <el-container>
            <HeaderBtnGroup @handleClick="handleHeaderClick" :config="headerConfig">
            </HeaderBtnGroup>
        </el-container>
        <el-container>
            <div style="width:100%;">
                <el-table :data="targets" v-loading="loadingShow">
                    <el-table-column fixed label="序号" type="index" prop="id"></el-table-column>
                    <el-table-column label="标题">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.title" v-if="row.title.length > maxLength">{{
                ellipsisContent(row.title) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.title" v-else>{{ row.title }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="链接" width="80px">
                        <template slot-scope="{ row }">
                            <el-link type="primary" @click="handleLinkClick(row)" underline>点击链接</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="usage == 1" label="内容" prop="content">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.content" v-if="checkLength(row.content)">{{
                ellipsisContent(row.content) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.content" v-else>{{ row.content }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column v-else label="内容">
                        <template slot-scope="{ row }">
                            <div class="ellipsis" :title="row.aiResult" v-if="checkLength(row.aiResult)">{{
                ellipsisContent(row.aiResult) }} <el-link type="primary" underline>more</el-link>
                            </div>
                            <div class="ellipsis" :title="row.aiResult" v-else>{{ row.aiResult }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="80px" prop="status">
                        <template slot-scope="{ row }">
                            <span>{{ showStatusDesc(row.status) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="250" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="handleCrawle(scope.row)">{{ buttonName
                                }}</el-button>
                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-container>
        <el-dialog title="添加文章" :visible.sync="dialogFormVisible" destroy-on-close @close="handleDialogClose"
            width="590px">
            <el-form :model="form" ref="addForm" label-position="right" :rules="rules">
                <el-form-item label="标题" :label-width="formLableWidth">
                    <el-input v-model="form.title" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="链接" :label-width="formLableWidth">
                    <el-input v-model="form.link" auto-complete="off" size="mini"></el-input>
                </el-form-item>
                <el-form-item v-if="usage == 1" label="内容" :label-width="formLableWidth">
                    <el-input type="textarea" class="custom-textarea" v-model="form.content" auto-complete="off"
                        size="medium"></el-input>
                </el-form-item>
                <el-form-item v-else label="内容" :label-width="formLableWidth">
                    <el-input type="textarea" class="custom-textarea" v-model="form.aiResult" auto-complete="off"
                        size="medium"></el-input>
                </el-form-item>
                <el-form-item label="图片/视频" :label-width="formLableWidth">
                    <UploadMedia :fileList="fileList"></UploadMedia>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addData('addForm')" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<style lang="scss">
.article-container {
    .custom-textarea .el-textarea__inner {
        height: 200px;
        /* 设置固定高度为 200px */
    }

    .el-dialog__body {
        padding-bottom: 0px !important;
        padding-top: 10px !important;
    }
}
</style>

<script>
import { shell } from 'electron'
import { ArticleDao } from '@/dao/articleDao'
import { ArticleStatus } from '@/entities/Constant'
import { funcFns } from '@/puppeteer/utils/funtion'
import { HeaderBtnMixin } from "@/mixins/HeaderBtnMixin"
import UploadMedia from "@/components/Common/UploadMedia"
import HeaderBtnGroup from "@/components/Common/HeaderBtnGroup"

export default {
    name: "Article",
    mixins: [HeaderBtnMixin],
    components: {
        UploadMedia,
        HeaderBtnGroup
    },
    props: {
        buttonName: {
            type: String,
            default: "生成"
        },
        usage: {
            type: Number,
            default: 0,
        },
        statusBtns: {
            type: Array,
            default: () => {
                return [
                    { status: -1, name: "全部" },
                    { status: 2, name: "已生成" },
                    { status: 3, name: "已发布" }
                ]
            }
        }
    },
    data() {
        return {
            targets: [],
            fileList: [],
            platforms: [],
            maxLength: 50,
            loadingShow: true,
            formLableWidth: "80px",
            form: ArticleDao.initialForm(),
            rules: {
                name: [{
                    required: true,
                    message: "",
                    trigger: "blur",
                }],
                link: [{
                    required: true,
                    message: "",
                    trigger: "blur",
                }]
            },
            whereDict: this.getWhereDict(),
            headerConfig: {
                pageSize: ArticleDao.pageSize,
                statusBtns: this.statusBtns,
            }
        }
    },
    mounted() {
        this.getTargets(this.page)
    },
    methods: {
        getTargets(page) {
            this.loadingShow = true
            ArticleDao.fetchCount(this.whereDict, page).then((res) => {
                this.loadingShow = false
                this.targets = res.datas
                this.headerConfig.total = res.count
            })
        },
        handleCrawle(row) {
            this.$emit("handleRow", row)
        },
        handleLinkClick(row) {
            shell.openExternal(row.link);
        },
        handleEdit(row) {
            this.form = row
            this.dialogFormVisible = true
        },
        handleDelete(id) {
            ArticleDao.delete(id).then(res => this.getTargets(this.page))
        },
        handleDialogClose() {
            this.form = ArticleDao.initialForm()
        },
        checkLength(content) {
            if (!content) {
                return false
            }
            if (content.length < this.maxLength) {
                return false
            }
            return true
        },
        ellipsisContent(content) {
            return funcFns.ellipsisContent(content, this.maxLength)
        },
        addData(formName) {
            const formData = this.form
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogFormVisible = false
                    ArticleDao.save(formData).then(() => {
                        this.getTargets(this.page)
                        this.form = ArticleDao.initialForm()
                    })
                }
            })
        },
        showStatusDesc(status) {
            let obj = ArticleStatus.Options().find(obj => obj.id == status)
            return obj ? obj.name : ""
        },
        getWhereDict() {
            let keys = Object.keys(this.statusBtns)
            let whereDict = { status: [] }
            for (let key of keys) {
                let status = this.statusBtns[key].status
                if (status > 0) whereDict.status.push(status)
            }
            return whereDict
        }
    },
}
</script>
